<template>
  <div>
    <div style="margin-left: 0%" class="container">
      <el-page-header @back="goBack()"> </el-page-header>
      <div style="margin-left: 120px">
        <p style="font-size: 28px; font-weight: bold">
          {{ house.htitle }}
        </p>
        <p style="color: gray; margin-top: -5px">
          发布时间：{{ house.hreleasedate }}
        </p>
        <p style="color: gray; margin-top: -5px">房源编号：{{ house.hid }}</p>

        <!------------- 租房--------- -->
        <div style="float: right; margin-top: -5%; margin-right: 25%">
          <template>
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="red"
              title="确定要租房吗？"
              @confirm="handleJoin()"
            >
              <el-button slot="reference" type="primary">我要租房</el-button>
            </el-popconfirm>
          </template>
        </div>
        <!------------- 举报--------- -->
        <div style="float: right; margin-top: -5%; margin-right: 12%">
          <el-button type="danger" @click="dialogFormVisible = true"
            >我要举报</el-button
          >

          <el-dialog title="我要举报" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="房屋名称" :label-width="formLabelWidth">
                <el-input
                  disabled
                  style="width: 70%"
                  v-model="form.name"
                  autocomplete="off"
                  :placeholder="house.htitle"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="举报理由"
                prop="reason"
                :label-width="formLabelWidth"
              >
                <el-input
                  type="textarea"
                  style="width: 70%"
                  v-model="form.reason"
                  autocomplete="off"
                  placeholder="请填写举报理由"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">放弃举报</el-button>
              <el-button plain type="primary" @click="addReport"
                >提交</el-button
              >
            </div>
          </el-dialog>
        </div>
      </div>

      <!-- 左侧房子图片 -->
      <div
        class="left"
        style="width: 40%; margin-left: 120px; height: 450px; float: left"
      >
        <!-- ----------轮播----------- -->
        <div id="app">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="(img, index) in imgList" :key="index">
              <el-image :src="img" fit="cover" style="width: 100%; height: 100%"/>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <!-- 右侧房子--------------- -->
      <div
        class="right"
        style="
          width: 40%;
          margin-left: 10px;
          height: 450px;
          border: 1px solid lightgray;
          float: left;
        "
      >
        <div style="margin-left: 30px; margin-top: 20px">
          <p
            style="
              color: red;
              font-size: 30px;
              display: inline;
              font-weight: bold;
            "
          >
            {{ house.hprice }}
          </p>
          <p style="color: red; display: inline">元/月（1年起）</p>
          <div style="float: right; margin-top: 5px">
            <el-button
              @click="open"
              type="text"
              style="font-size: 16px; color: black; margin-right: 3px"
              >🚀分享</el-button
            >
            <el-button
              v-if="favorite"
              class="like"
              type="text"
              style="font-size: 16px; color: black; margin-right: 30px"
            >
              🖤喜欢</el-button
            >
            <el-button
              v-else
              class="like"
              type="text"
              style="font-size: 16px; color: black; margin-right: 30px"
            >
              🧡已喜欢</el-button
            >
          </div>
          <br />
          <br />
          <hr
            style="
              height: 1px;
              border: none;
              border-top: 1px dashed lightgray;
              text-align: center;
              margin-right: 20px;
            "
          />

          <div style="margin-top: 15px; margin-bottom: 12px">
            <span style="color: gray; font-size: 16px"
              >所在小区：
              <p style="display: inline; color: black">
                {{ house.hestate }}
              </p></span
            >
          </div>
          <div style="margin-top: 15px; margin-bottom: 12px">
            <span style="color: gray; font-size: 16px"
              >租赁方式：
              <p style="display: inline; color: black">
                {{ house.hmode }}
              </p></span
            >
          </div>
          <div style="margin-bottom: 12px">
            <span style="color: gray; font-size: 16px"
              >房屋类型：
              <p style="display: inline; color: black">
                {{ house.htype }}
              </p></span
            >
          </div>
          <div style="margin-bottom: 12px">
            <span style="color: gray; font-size: 16px"
              >房屋面积：
              <p style="display: inline; color: black">
                {{ house.harea }}㎡
              </p></span
            >
          </div>
          <div style="margin-bottom: 12px">
            <span style="color: gray; font-size: 16px"
              >朝向户型：
              <p style="display: inline; color: black">
                {{ house.horientation }}
              </p></span
            >
          </div>
          <hr
            style="
              height: 1px;
              border: none;
              border-top: 1px dashed lightgray;
              text-align: center;
              margin-right: 20px;
            "
          />
        </div>
        <div style="margin-left: 10px; margin-top: 20px">
          <el-avatar :size="70" :src="user.uimg" fit="cover"></el-avatar>
          <p
            style="
              font-size: 20px;
              float: right;
              margin-right: 235px;
              margin-top: 2%;
            "
          >
            {{ user.uname }}
          </p>
          <p
            style="
              font-size: 16px;
              color: gray;
              float: left;
              margin-left: 90px;
              margin-top: -30px;
            "
          >
            房主
          </p>
        </div>
        <el-tooltip
          :disabled="disabled"
          content="点击咨询"
          placement="bottom"
          effect="light"
        >
          <el-button
            @click="disabled = !disabled"
            plain
            type="primary"
            style="margin-left: -120px; margin-top: 15px"
          >
            <i class="el-icon-phone-outline"></i
            >{{ disabled ? house.hphone : "电话咨询" }}
          </el-button>
        </el-tooltip>
        <el-button @click="open" plain type="primary">
          <i class="el-icon-chat-dot-square"></i>
          在线咨询
        </el-button>
      </div>
      <div
        style="
          margin-top: 5%;
          margin-left: 5%;
          width: 85%;
          height: auto;
          margin-bottom: 40px;
          float: left;
        "
      >
        <hr
          style="
            height: 1px;
            border: none;
            border-top: 1px dashed lightgray;
            text-align: center;
            margin-right: 20px;
          "
        />
        <!-- --------------------------右侧更多----------------- -->
        <div class="more" style="float: right; width: 28%; height: auto">
          <p style="font-size: 22px; font-weight: bold">更多推荐</p>
          <div style="margin-bottom: 30px">
            <el-card
              shadow="hover"
              :body-style="{ padding: '0px' }"
              style="width: 240px; margin-left: 30px"
            >
              <router-link to="/">
                <img src="../img/index-1.png" class="image" />
              </router-link>
              <div style="padding: 14px">
                <span>整租·左岸风度 2室2厅</span>
                <p class="address" style="color: gray; font-size: 14px">
                  崂山区/
                </p>
                <div class="bottom clearfix">
                  <p style="text-align: right; color: red" class="price">
                    2000/月
                  </p>
                </div>
              </div>
            </el-card>
          </div>
          <div>
            <el-card
              shadow="hover"
              :body-style="{ padding: '0px' }"
              style="width: 240px; margin-left: 30px"
            >
              <router-link to="/">
                <img src="../img/index-1.png" class="image" />
              </router-link>
              <div style="padding: 14px">
                <span>整租·左岸风度 2室2厅</span>
                <p class="address" style="color: gray; font-size: 14px">
                  崂山区/
                </p>
                <div class="bottom clearfix">
                  <p style="text-align: right; color: red" class="price">
                    2000/月
                  </p>
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <p style="font-size: 26px; font-weight: bold; margin-left: 30px">
          房屋信息
        </p>
        <div
          class="1-left"
          style="float: left; width: 20%; height: 360px; margin-left: 30px"
        >
          <p style="color: gray; font-size: 20px">基本信息</p>
        </div>
        <div class="2-mid" style="float: left; height: 360px; width: 20%">
          <p style="font-size: 16px">面积：{{ house.harea }}</p>
          <p style="font-size: 16px">楼层：{{ house.hfloor }}</p>
          <p style="font-size: 16px">用电：民电</p>
          <p style="font-size: 16px">租期：{{ house.hterm }}</p>
          <p style="font-size: 16px">车位：公共车位</p>
          <p style="font-size: 16px">供暖：集中供暖</p>
          <p style="font-size: 16px">看房：需提前预约</p>
        </div>
        <div
          class="3-right"
          style="float: left; height: 360px; width: 20%; margin-left: 30px"
        >
          <p style="font-size: 16px">朝向：{{ house.horientation }}</p>
          <p style="font-size: 16px">入住：随时</p>
          <p style="font-size: 16px">
            电梯：{{ house.helevator === true ? "有" : "无" }}
          </p>
          <p style="font-size: 16px">用水：民用</p>
          <p style="font-size: 16px">燃气：有</p>
        </div>
        <div style="float: left; width: 70%; height: 450px; margin-top: 20px">
          <hr
            style="
              height: 1px;
              border: none;
              border-top: 1px dashed lightgray;
              text-align: center;
              margin-right: 20px;
            "
          />
          <p style="font-size: 24px; font-weight: bold; margin-left: 30px">
            房源描述
          </p>
          <div style="margin-left: 30px">
            <el-avatar
              :size="70"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
            <p
              style="
                font-size: 20px;
                float: right;
                margin-right: 400px;
                margin-top: 16px;
              "
            >
              {{ user.uname }}
            </p>
            <p
              style="
                font-size: 16px;
                color: gray;
                float: right;
                margin-right: -40px;
                margin-top: 50px;
              "
            >
              房主
            </p>
            <el-tooltip
              style="margin-top: -50px"
              :disabled="disabled"
              content="点击咨询"
              placement="bottom"
              effect="light"
            >
              <el-button
                @click="disabled = !disabled"
                plain
                type="primary"
                style="margin-right: 60px; float: right"
              >
                <i class="el-icon-phone-outline"></i
                >{{ disabled ? house.hphone : "电话咨询" }}
              </el-button>
            </el-tooltip>
            <br />
            <br />
            <br />
          </div>
          <div style="margin-left: 30px">
            <p style="margin-left: -10px; font-size: 20px">【详细信息】</p>
            <p style="color: gray; font-size: 18px">{{ house.hdescribe }}</p>
          </div>
        </div>
        <!-- ----------------------费用详情-------------- -->
        <div style="width: 70%; margin-top: 30px; height: \200px; float: left">
          <p style="font-size: 24px; font-weight: bold; margin-left: 30px">
            费用详情
          </p>
          <div
            style="width: 17%; height: 110px; float: left; margin-left: 30px"
          >
            <p>付款方式</p>
            <p style="color: gray; margin-left: 10px">半年付</p>
          </div>
          <div
            style="width: 17%; height: 110px; float: left; margin-left: 30px"
          >
            <p>租金(元)</p>
            <p style="color: red">{{ house.hprice }}</p>
          </div>
          <div
            style="width: 19%; height: 110px; float: left; margin-left: 30px"
          >
            <p>服务费(元)</p>
            <p style="color: gray; margin-left: 20px">0</p>
          </div>
          <div
            style="width: 17%; height: 110px; float: left; margin-left: 30px"
          >
            <p>中介费(元)</p>
            <p style="color: gray; margin-left: 20px">0</p>
          </div>
        </div>
        <!-- ---------------地图--------------------- -->
        <div
          style="
            width: 70%;
            margin-top: 30px;
            height: 400px;
            float: left;
            margin-bottom: 30px;
          "
        >
          <p style="font-size: 24px; font-weight: bold; margin-left: 30px">
            地址和交通
          </p>
          <!-- ----------------地图图片------------------- -->
          <div style="width: 94%; height: auto; margin-left: 30px">
            <!-- <baidu-map
              :center="center"
              :zoom="zoom"
              @ready="handler"
              style="height: 330px"
              @click="getClickInfo"
              :scroll-wheel-zoom="true"
            >
            </baidu-map> -->

            <div class="map" v-loading="loading">
              <el-input
                placeholder="请输入搜索地址"
                v-model="mapName"
                class="input-with-select"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="mapNameChange"
                ></el-button>
              </el-input>
              <div style="margin-top: -15%" v-if="mapPointName">
                当前选中：{{ mapPointName }}
              </div>
              <div
                id="container"
                style="height: 280px; width: 100%"
                ref="allmap"
              ></div>
              <!-- <div class="map-btn">
                <el-button type="primary" @click="dialogMap = false"
                  >确认</el-button
                >
              </div> -->
            </div>
          </div>
        </div>
        <!-- ----------------评论----------- -->
        <div
          style="
            width: 70%;
            height: auto;
            float: left;
            margin-bottom: 50px;
            margin-top: 5%;
          "
        >
          <p style="font-size: 24px; font-weight: bold; margin-left: 30px">
            <i class="el-icon-edit"></i> 我要留言
          </p>
          <div style="width: 70%; margin-left: 30px">
            <el-input
              autosize
              :row="15"
              type="textarea"
              placeholder="请输入内容"
              v-model="subcomment.ccontent"
            >
            </el-input>
          </div>
          <el-button
            size="small"
            plain
            style="float: right; margin-top: -5%; margin-right: 12%"
            class="submit"
            @click="submitComment"
          >
            发布
          </el-button>
          <br /><br />
          <p style="font-size: 20px; font-weight: bold; margin-left: 30px">
            全部留言
          </p>
          <!-- --------------留言板------------- -->
          <div style="margin-left: 30px; margin-bottom: 20px">
            <span v-for="item in comment" :key="item">
              <el-avatar :size="40" :src="item.user.uimg"></el-avatar>
              <div
                style="
                  margin-left: 60px;
                  width: 70%;
                  margin-bottom: 80px;
                  margin-top: -40px;
                "
              >
                <div style="margin-top: -15%">
                  <p style="font-size: 14px; color: gray">
                    {{ item.user.uname }}
                  </p>
                  <p style="font-size: 12px; color: gray; margin-top: -2%">
                    {{ item.comment.cdate }}
                  </p>
                </div>
                <p style="display: inline">
                  {{ item.comment.ccontent }}
                </p>
                <br />
                <hr
                  style="
                    height: 1px;
                    border: none;
                    border-top: 1px dashed lightgray;
                    text-align: center;
                    margin-right: 20px;
                    margin-left: 25px;
                  "
                />
                <!-- ------回复区------------------- -->
                <!-- <p style="font-size: 14px; color: gray; margin-left: -12%">
                  楼主 -> 用户名1
                </p> -->
                <!-- <div class="repiay">
                  <p style="display: inline">
                    来了来了！
                  </p>
                </div> -->
              </div>
              <!-- <div style="width: 70%; margin-left: 6%">
                <el-input
                  style=""
                  autosize
                  :row="5"
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="textarea"
                >
                </el-input>
                <el-button
                  plain
                  size="small"
                  style="float: right; margin-right: -15%; color: gray"
                >
                  回复
                </el-button>
              </div> -->
            </span>
          </div>
          <hr
            style="
              height: 1px;
              border: none;
              border-top: 1px dashed lightgray;
              text-align: center;
              margin-right: 20px;
              margin-left: 25px;
            "
          />
          <!-- <div style="margin-left: 30px; margin-bottom: 20px">
            <span>
              <el-avatar
                :size="40"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              <div
                style="
                  margin-left: 60px;
                  width: 70%;
                  margin-bottom: 30px;
                  margin-top: -40px;
                "
              >
                <p style="display: inline">
                  很好哈ffhfhehfefqqqqqqqqqwcfdjghuh
                  各个房间格局更黑hi韩国人购入购入日本国克奶粉听人家姑娘难道你当会计
                  哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                </p>
              </div>
              <div style="float: right; margin-top: -60px; margin-right: 50px">
                <el-button type="text"> 回复 </el-button>
              </div>
            </span>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
let map = null,
  geoc = null;
import "element-ui/lib/theme-chalk/index.css";
import ElementUI from "element-ui";
import { getHouseByHid } from "@/network/house";
import { report } from "@/network/report";
import { addShare } from "@/network/house";
import { getCommentByHid } from "@/network/house";
import { addComment } from "@/network/house";
export default {
  mounted() {},
  computed: {
    favorite() {
      // 先获得数据库中的数据
      // 然后判断收藏表中是否有这个数据
      return true;
    },
  },
  data() {
    return {
      dialogMap: false,
      mapName: "",
      mapPointName: "",
      loading: true,
      mapGetshow: true,
      dialogName: "",
      id: "",
      textarea: "",
      disabled: false,
      house: {},
      share: {
        mid: "",
        uid: "",
        hid: "",
      },
      comment: [],
      subcomment: {
        cid: "",
        uid: "",
        cdate: "",
        hid: "",
        ccontent: "",
      },

      activeIndex: "1",
      activeIndex2: "1",

      drawer1: false,
      drawer2: false,

      imgList: [
        { url: require("../img/index-1.png") },
        { url: require("../img/index-2.png") },
        { url: require("../img/index-3.png") },
      ],

      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        uid: "",
        hid: "",
        reason: "",
        rid: "null",
        aid: "-1",
        state: "2",
      },
      formLabelWidth: "120px",
      user: {},
    };
  },
  created() {
    // console.log(this.$route.params.id);
    if (this.$store.state.user.uid === "") {
      this.$message.error("您没有权限访问本页面");
      this.$router.push("/");
    }
    this.id = this.$route.params.id;
    console.log(this.id);
    getHouseByHid(this.id).then((res) => {
      // console.log(res)
      this.house = res.house;
      this.imgList = res.imgs;
      this.user = res.user;
    });
    this.mapBuild();
    getCommentByHid(this.id).then((res) => {
      // console.log("评论")
      console.log(res);
      this.comment = res;
    });
  },
  methods: {
    goBack() {
      // console.log("go back");
      history.back(-1);
    },
    submitComment() {
      console.log("点击了");
      this.subcomment.uid = this.$store.state.user.uid;
      this.subcomment.hid = this.id;
      addComment(this.subcomment).then((res) => {
        this.$message({
          message: "恭喜你，" + res.msg,
          type: "success",
        });
        this.subcomment.ccontent = "";
        getCommentByHid(this.id).then((res) => {
          this.comment = res;
        });
      });
    },
    addReport() {
      this.dialogFormVisible = false;
      this.form.uid = this.$store.state.user.uid;
      this.form.hid = this.house.hid;
      report(this.form).then((res) => {
        this.$message({
          message: "恭喜你，" + res.msg,
          type: "success",
        });
      });
    },
    handleJoin() {
      // 加入合租
      console.log("加入合租");
      this.share.uid = this.$store.state.user.uid;
      this.share.mid = this.house.uid;
      this.share.hid = this.house.hid;
      addShare(this.share)
        .then((res) => {
          if (res.status) {
            this.$message({
              message: "恭喜你，" + res.msg,
              type: "success",
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch((error) => {
          this.$message({
            message: "加入合租失败",
            type: "warning",
          });
        });
    },
    //搜索地图
    mapNameChange() {
      let that = this,
        point,
        marker = null;
      let local = new BMap.LocalSearch(map, {
        renderOptions: { map: map },
        onSearchComplete: (res) => {
          if (local.getResults() != undefined) {
            map.clearOverlays(); //清除地图上所有覆盖物
            if (local.getResults().getPoi(0)) {
              point = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
              map.centerAndZoom(point, 10);
              marker = new BMap.Marker(point); // 创建标注
              map.addOverlay(marker); // 将标注添加到地图中
              marker.enableDragging(); // 可拖拽
              geoc.getLocation(point, function (rs) {
                var addComp = rs.addressComponents;
                console.log(addComp);
                that.mapPointName =
                  addComp.province +
                  ", " +
                  addComp.city +
                  ", " +
                  addComp.district +
                  ", " +
                  addComp.street +
                  ", " +
                  addComp.streetNumber;
              });
            } else {
              alert("未匹配到地点!可拖动地图上的红色图标到精确位置");
            }
          } else {
            alert("未找到搜索结果");
          }
        },
      });
      local.search(this.mapName);
    },
    //地图显示
    mapBuild() {
      let that = this;
      this.dialogMap = !this.dialogMap;
      setTimeout(function () {
        if (that.mapGetshow) {
          map = new BMap.Map("container");
          geoc = new BMap.Geocoder();
          let point = new BMap.Point(116.3964, 39.9093);
          map.centerAndZoom(point, 10);
          map.enableScrollWheelZoom();
          var geolocation = new BMap.Geolocation();
          //定位
          geolocation.getCurrentPosition(
            (r) => {
              console.log(r);
              var mk = new BMap.Marker(r.point);
              map.addOverlay(mk);
              map.panTo(r.point);
              geoc.getLocation(r.point, function (rs) {
                var addComp = rs.addressComponents;
                console.log(addComp);
                that.mapPointName =
                  addComp.province +
                  addComp.city +
                  addComp.district +
                  addComp.street +
                  addComp.streetNumber;
                that.loading = false;
                that.mapGetshow = false;
              });
            },
            { enableHighAccuracy: true }
          );
          //鼠标点击
          map.addEventListener("click", function (e) {
            console.log(e);
            var pt = e.point;
            var marker = new BMap.Marker(pt); // 创建标注
            map.clearOverlays();
            map.addOverlay(marker);
            geoc.getLocation(pt, function (rs) {
              var addComp = rs.addressComponents;
              console.log(addComp);
              that.mapPointName =
                addComp.province +
                addComp.city +
                addComp.district +
                addComp.street +
                addComp.streetNumber;
            });
          });
        }
      }, 1000);
    },

    open() {
      this.$message("该服务尚未开通，敬请期待！😀");
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
.el-drawer {
  height: 60%;
  margin-top: 100px;
  margin-bottom: 50px;
  margin-right: 40px;
  border-radius: 10px;
}
.el-carousel__container {
  height: 450px;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 180px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.el-main {
  text-align: left;
}
.el-footer {
  height: 0px;
}
</style>